<template>
  <div>
    <div class="tjxc_box">
      <div class="tjxc_ul">
        <div class="close" v-if="close" @click="closexc">
          <a-icon type="close" />
        </div>
        <ul>
          <li>
            <span class="inp_tit">
              <span class="red">*</span>相册名称：
            </span>
            <a-input style="width:500px;" v-model="xctit" placeholder="请输入相册名称" />
          </li>
          <li>
            <span class="inp_tit">
              <span class="red">*</span>相册图片：
            </span>
            <div class="clearfix">
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                listType="picture-card"
                :fileList="tjxcfileList"
                @preview="handlePreview"
                @change="sfzghChange"
                accept=".jpg"
              >
                <div v-if="tjxcfileList.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">照片上传</div>
                </div>
              </a-upload>
            </div>
          </li>
          <li>
            <span class="inp_tit">备注：</span>
            <span class="ccc">上传照片大小不能超过2M</span>
          </li>
          <li>
            <span class="inp_tit">相册介绍：</span>
            <a-textarea
              name
              id
              style="width:500px"
              placeholder="请填写公司简介（最多允许输入500个汉字！）"
              cols="30"
              rows="5"
              v-model="gsjs"
            ></a-textarea>
          </li>
          <li>
            <div class="fot_btn">
              <a-button type="primary" @click="subtjxc">提交</a-button>
              <a-button @click="closexc">返回</a-button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  inject: ["reload"],

  data() {
    return {
      previewVisible: false,
      previewImage: "",
      tjxcfileList: [],
      xctit:
        this.$store.state.tjxceditflag == false
          ? ""
          : this.$parent.editvalue.title,
      gsjs:
        this.$store.state.tjxceditflag == false
          ? ""
          : this.$parent.editvalue.depict,
      close: this.$parent.close
    };
  },

  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    sfzghChange({ fileList }) {
      this.tjxcfileList = fileList;
      console.log(fileList);
    },
    subtjxc() {
      // console.log(this.xctit)
      // console.log(this.gsjs)
      // console.log(this.tjxcfileList[0].thumbUrl)
      if (!this.$parent.editvalue) {
        //新增

        if (this.tjxcfileList.length) {
          var thumbUrl = this.tjxcfileList[0].thumbUrl;
          this.axios
            .post(
              "photo/photoAdd.php",
              qs.stringify({
                sqdwid: this.$store.state.bbl_sqdwid,
                title: this.xctit,
                depict: this.gsjs,
                pic: thumbUrl
              })
            )
            .then(res => {
              console.log(res);
              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                this.reload();
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
              }
            });
        } else {
          this.$notification["error"]({
            message: "失败",
            description: "请上传照片"
          });
        }
      } else {
        //编辑修改
        if (this.tjxcfileList.length) {
          var thumbUrl = "";
          if (this.tjxcfileList[0].url) {
            thumbUrl = this.$parent.editvalue.images;
          } else {
            thumbUrl = this.tjxcfileList[0].thumbUrl;
          }

          this.axios
            .post(
              "photo/photoEdit.php",
              qs.stringify({
                sqdwid: this.$store.state.bbl_sqdwid,
                id: this.$parent.editvalue.id,
                title: this.xctit,
                depict: this.gsjs,
                pic: thumbUrl
              })
            )
            .then(res => {
              console.log(res);
              if (res.data.code == 303) {
                this.$parent.tjxcflg = false;
                this.$store.state.tjxceditflag = false;
                this.$parent.getphotoList(this.$parent.pagination);
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                // this.reload();
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
              }
            });
        } else {
          this.$notification["error"]({
            message: "失败",
            description: "请上传照片"
          });
        }
      }
    },
    closexc() {
      this.$parent.tjxcflg = false;
      this.$parent.editvalue = "";
      this.$store.state.tjxceditflag = false;
    }
  },
  components: {},
  created() {
    //   if(this.$parent.editvalue){

    //   }
    if (this.$store.state.tjxceditflag) {
      let list = {
        uid: " ",
        name: " ",
        status: " ",
        url:
          "http://image.bearing.cn/qy/member/album/" +
          this.$parent.editvalue.images
      };
      this.tjxcfileList.push(list);
    } else {
      this.tjxcfileList = [];
    }
    console.log(this.tjxcfileList);
  }
};
</script>

<style lang='less'>
.tjxc_box {
  position: relative;
  top: 100px;
  left: 1%;
  background: #fff;
  text-align: left;
  padding: 30px;
  width: 98%;
  .tjxc_ul {
    ul {
      li {
        margin-top: 20px;
        display: flex;
        .inp_tit {
          display: inline-block;
          width: 100px;
          text-align: right;
          .red {
            color: red;
            margin-right: 5px;
          }
        }
        .fot_btn {
          position: relative;
          left: 10%;
          button {
            width: 100px;
            margin: 0 20px;
          }
        }

        .ant-upload.ant-upload-select-picture-card {
          // display: inline-block;
        }
      }
    }
  }
  // .clearfix {
  //           // margin-left: 80px;
  //           display: inline-block;
  //           vertical-align: middle;
  //           width: 74%;
  //         }
}
</style>
